<template>
  <div class="wrapper">
    <minbar title="商品详情" :isPadding="true"></minbar>
    <scroller show-scrollbar="flase" class="x-scroller">
      <x-slider :imageList="detailData.imgs"></x-slider>
      <div class="x-shop-info">
        <!-- 商品名称 -->
        <div class="x-flexrow x-shop-top">
          <text class="x-shop-title">{{detailData.name}}</text>
          <text class="iconfont x-shop-share" @click="showShareBtn">&#xe66b;</text>
        </div>
        <!-- 价格 -->
        <div class="x-flexrow">
          <text class="x-shop-price x-fontsize30">¥</text>
          <text class="x-shop-price">{{getPrice()}}</text>
        </div>
        <!-- 品牌 -->
        <div>
          <text class="x-shop-pp">品牌：{{getBrand()}}</text>
          <text class="x-shop-pp">生产周期：一个工作日</text>
        </div>
      </div>
      <div class="x-shop-info x-top-border x-bottom15">
        <text class="x-shop-tui">商家推荐：老裁缝家纺正品床上用品四件套专版 皇家庄园</text>
      </div>
      <!-- 列表 -->
      <x-cell label="领券" class="list-margin" 
        :topBorder="true" 
        :hasArrow="true" 
        labelWidth="100">
        <div slot="title" class="x-title-div">
            <text class="x-title">店铺优惠券</text>
            <text class="x-cell-content">南通嵩明街店满300减50优惠券;苏州店满500减100</text>
        </div>
      </x-cell>
      <x-cell label="赠品"
        :hasArrow="true" 
        labelWidth="100"
        :hasBottomBorder="false">
        <div slot="title" class="x-title-div">
            <text class="x-title">优惠券赠品</text>
            <text class="x-cell-content">领取店铺优惠券赠送礼品</text>
        </div>
      </x-cell>
      <x-cell label=" "
        :hasArrow="true" 
        labelWidth="100">
        <div slot="title" class="x-title-div">
            <text class="x-title">套餐赠品</text>
            <text class="x-cell-content">购买相应套餐送礼品</text>
        </div>
      </x-cell>
      <x-cell label="现金券"
        labelWidth="100">
        <div slot="title" class="x-title-div">
            <text class="x-title">现金券</text>
            <text class="x-cell-content">购买可获得50元现金券</text>
        </div>
      </x-cell>
      <x-cell label="活动"
        labelWidth="100"
        :hasArrow="true">
        <div slot="title" class="x-title-div">
            <text class="x-cell-content">跨店满减45元;店铺优惠5元;</text>
        </div>
      </x-cell>
      <!-- 规格颜色 -->
      <x-cell label="规格" class="list-margin" 
        :topBorder="true" 
        :hasArrow="true" 
        labelWidth="100"
        @cellClick="showShopPopup">
        <div slot="title" class="x-title-div">
            <text class="x-cell-content">选择 适用床尺寸 颜色分类</text>
        </div>
      </x-cell>
      <x-cell label="参数"
        :hasArrow="true" 
        labelWidth="100">
        <div slot="title" class="x-title-div">
            <text class="x-cell-content">件数 被面材质...</text>
        </div>
      </x-cell>
      <image class="x-zkimage" :src="zkimg"></image>
      <image v-for="(v,i) in detailData.content" :key="i" :src="v.link" :style="getContentImg(v)"></image>
    </scroller>
    <!-- 底部按钮 -->
    <div class="x-bottom">
      <div class="x-bottom-left">
        <div class="x-kefu">
          <text class="iconfont x-icon-div">&#xe7bb;</text>
          <text class="x-icon-text">客服</text>
        </div>
        <div class="x-gwc">
          <text class="iconfont x-icon-gwc">&#xe642;</text>
          <text class="x-icon-text">购物车</text>
        </div>
      </div>
      <text class="x-bottom-btn x-bottom-gwc" @click="showShopPopup">加入购物车</text>
      <text class="x-bottom-btn" @click="showShopPopup">立即兑换</text>
    </div>
    <!-- 分享组件 -->
    <share v-model="showShare" :items="shareItems" @btnClick="shareBtnClick">
    </share>
    <!-- 商品信息 -->
    <x-popup :show="showBottom"
      height="900" @popupClicked="popupClicked">
      <div slot="popup_content">
        <div class="x-pop-top">
          <div class="x-content-center padding25 x-bottom-border" >
              <image class="x-image-top" :src="shopimg"></image>
              <div class="x-shop-div">
                <div class="x-shop-start">
                  <text class="x-shop-title2">老裁缝家纺 欧式十件套</text>
                </div>
                <div class="x-shop-last">
                    <text class="x-shop-price2 padding-bottom5">¥1799</text>
                    <text class="x-shop-kucun padding-bottom5">库存 62 件</text>
                </div>
              </div>
          </div>
          <!-- 尺寸 -->
          <div class="x-select x-bottom-border">
            <text class="x-select-title">请选择适用床尺寸</text>
            <div class="x-select-div">
              <text :class="['x-select-item',getSpecsSelect(item)?'select-active':'']" 
                v-for="(item,index) in sizeData" 
                :key="index" @click="selectSpecs(item)">{{item.title}}</text>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="x-select x-bottom-border">
            <text class="x-select-title">请选择适用床颜色</text>
            <div class="x-select-div">
              <text class="x-select-item" 
                v-for="(color,index) in colorData" 
                :key="index" >{{color.title}}</text>
            </div>
          </div>
          <!-- 数量 -->
          <div class="x-num padding25">
            <text class="x-num-text">购买数量</text>
            <div>
              <x-stepper :defaultValue="currentNum" 
                @stepperValueChanged="stepperValueChanged"></x-stepper>
            </div>
          </div>
        </div>
        <div class="x-pop-bottom">
          <text class="x-pop-btn x-bottom-gwc" @click="addShop">加入购物车</text>
          <text class="x-pop-btn" @click="shopSubmit">立即兑换</text>
        </div>
      </div>
    </x-popup>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
import shareData from "./data/shareData";
const navigator = weex.requireModule('navigator');

export default {
  components: {
    "button": require("../../../common/component/button.vue"),
    "minbar": require("../../../common/component/minbar.vue"),
    "x-cell": require("../../../common/component/cell.vue"),
    "x-slider" : require("../../../common/component/slider.vue"),
    "share": require("../../../common/component/share.vue"),
    "x-popup": require("../../../common/component/popup.vue"),
    "x-stepper": require("../../../common/component/stepper.vue"),
  },
  data() {
    return {
      detailData:[],
      zkimg: asCore.localpath + "img/shopinfo/zk.png",
      shopimg:asCore.localpath + "img/convert/order1.png",
      showShare: false,
      showBottom:false,
      shareItems: shareData.data,
      sizeData:[],
      colorData:[
        {
          title:"粉色"
        },
        {
          title:"蓝色"
        },
        {
          title:"驼色"
        },
        {
          title:"白色"
        },
        {
          title:"黄色"
        },
        {
          title:"绿色"
        }],
        currentSpecs:"",
        currentNum:1
    };
  },
  created() {
    var _this = this;
    var globalEvent = weex.requireModule('globalEvent') ;
    globalEvent.addEventListener("onPageInit", function (e) {
      var param = navigator.param();
      _this.detailData = param['data'];
      /**获取规格 */
      _this.getSpecs();
    });
  },
  methods: {
    /**获取品牌 */
    getBrand(){
      var data = this.detailData['brand'];
      if(data){
        return data.name;
      }else{
        return "无";
      }
    },
    /**获取价格 */
    getPrice(){
      var data = this.detailData.sku_list;
      if(data && data.length>0){
        var price = data[0]['price'];
        return price.toFixed(2);
      }
    },
    /**获取规格 */
    getSpecs(){
      var data = this.detailData.sku_list;
      if(data && data.length>0){
        for(var i in data){
          this.sizeData.push({
            title:data[i]['specs'][0]['value'],
            barcode:data[i]['barcode'],
            number:data[i]['number']
          });
        }
        //asCore.alert(JSON.stringify(this.sizeData));
      }
    },

    /**获取是否选中规格 */
    getSpecsSelect(data){
      if(this.currentSpecs == data.barcode) return true;
      else return false;
    },
    /**设置规格 */
    selectSpecs(data){
      this.currentSpecs = data.barcode;
    },
    /**改变数量 */
    stepperValueChanged(event){
      this.currentNum = event.value;
    },
    /** */
    addShop(){
      if(!this.currentSpecs) {
        asCore.toast("请选择规格");
        return;
      }
      asCore.post("/member/cart/inc",{barcode:this.currentSpecs,number:this.currentNum},(data,msg,flag)=>{
          asCore.toast("加入购物车成功~");
          this.showBottom = false;
      });
    },
    shareBtnClick(){
      this.showShare = false;
    },
    showShareBtn(){
      this.showShare = true;
    },
    showShopPopup(){
      this.showBottom = true;
    },
    popupClicked(){
      this.showBottom = false;
    },
    shopSubmit(){
      navigator.push(asCore.localpath + 'tailor/app/shopinfo/shopSubmit.js');
    },
    getContentImg(data){
      return {
        width:750,
        height:data.height-50
      }
    }
  }
};
</script>
<style scoped>
.wrapper {
  background-color: #dedfe1;
}
.iconfont {
  font-family: iconfont;
}
.x-image {
  width: 750px;
  height: 350px;
}
.x-zkimage {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 750px;
  height: 240px;
}
.x-shop-info {
  background-color: #fff;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
}
.x-flexrow {
  flex-direction: row;
}
.x-shop-top {
  padding-bottom: 25px;
}
.x-bottom15 {
  padding-bottom: 15px;
}
.x-shop-title {
  color: #1f1e24;
  font-size: 35px;
  flex: 1;
}
.x-shop-share {
  width: 50px;
  font-size: 40px;
  color: #b00f30;
  top: 5px;
}
.x-fontsize30 {
  font-size: 30px;
  top: 8px;
  padding-right: 5px;
}
.x-shop-price {
  font-size: 40px;
  color: #af0a2a;
  padding-bottom: 15px;
}
.x-shop-pp {
  font-size: 28px;
  color: #68686a;
  padding-bottom: 13px;
}
.x-top-border {
  border-top-color: #d0d0d0;
  border-top-width: 1px;
}
.x-shop-tui {
  color: #68686a;
  font-size: 24px;
}
.list-margin {
  margin-top: 15px;
}
.x-title-div {
  flex-direction: row;
}
.x-title {
  font-size: 20px;
  background-color: #887147;
  color: #fff;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}
.x-cell-content {
  color: #201f25;
  font-size: 30px;
  lines: 1;
  text-overflow: ellipsis;
  flex: 1;
}
.x-scroller {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  bottom: 100;
}
.x-bottom {
  position: absolute;
  bottom: 0;
  width: 750px;
  height: 100px;
  background-color: #fff;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.x-bottom-btn {
  width: 220px;
  background-color: #887147;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 30px;
}
.x-pop-btn {
  flex: 1;
  background-color: #887147;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 30px;
}
.x-bottom-gwc {
  background-color: #1f1e24;
}
.x-bottom-left {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.x-kefu {
  padding-left: 40px;
  padding-right: 40px;
}
.x-gwc {
  padding-left: 20px;
  padding-right: 40px;
}
.x-icon-gwc {
  color: #1f1e24;
  font-size: 40px;
  top:5px;
  left: 6px;
  padding-bottom: 5px;
}
.x-icon-div {
  color: #1f1e24;
  font-size: 40px;
  left: 3px;
  top:7px;
  padding-bottom: 5px;
}
.x-icon-text {
  color: #1f1e23;
  font-size: 26px;
}
.x-pop-top {
  height: 800px;
  width: 750px;
}
.x-pop-bottom {
  width: 750px;
  height: 100px;
  flex-direction: row;
}
.x-content-center {
    flex-direction: row;
    padding-top:20px;
    padding-bottom: 20px;
}
.x-select {
  padding-top:20px;
  padding-bottom: 20px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.x-image-top {
    height: 150px;
    width: 150px;
}
.x-shop-div {
    flex: 1;
    position: relative;
    height: 150px;
}
.x-shop-start {
    padding-left: 15px;
}
.x-shop-last {
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
}
.x-shop-title2 {
    color: #16151a;
    font-size:32px;
}
.x-shop-price2 {
    color: #af0a28;
    font-size: 28px;
}
.padding-bottom5 {
    padding-bottom: 5px;
}
.padding25{
    padding-left: 25px;
    padding-right: 25px;
}
.x-shop-kucun {
  color: #151419;
  font-size: 30px;
}
.x-select-title {
  color: #151517;
  font-size:30px;
  padding-bottom: 20px;
  padding-left: 25px;
}
.x-select-div {
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 15px;
  padding-right: 15px;
}
.x-select-item {
  height: 70px;
  line-height: 70px;
  width: 220px;
  border-color: #b7b6bc;
  border-width: 1px;
  border-radius: 10px;
  text-align: center;
  font-size: 28px;
  color: #1f1e24;
  margin: 10px;
}
.x-num {
  flex-direction: row;
  padding-top:20px;
  padding-bottom: 20px;
}
.x-num-text {
  color: #16151a;
  font-size: 28px;
  flex: 1;
}
.select-active {
  color: #fff;
  background-color: #887147;
}
</style>
